
<!DOCTYPE html>
<html>
<head>
<title>Report</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="Vide" />

	<!--<script src="js/jquery-1.11.1.min.js"></script>-->
	<!--<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>-->
<style>
	body{width: 100%; }
	.header{width: 100%; height: auto}
	.main{width: 70%; height: auto;margin: 0 auto;}
	.inner{width: 70%; margin: 0 auto;}
	a{text-decoration: none;}
	.checked{border-bottom: 2px solid orangered;}

	.header{
		background-color: white;
		border-bottom: 2px solid whitesmoke;
		position: fixed;
		top:0;
		z-index: 10;
	}
	.header a{
		color: grey;font-size: 20px;
	}
	.header .inner{
		height: 50px;
		color: grey;
		font-size: 25px;
		line-height: 45px;
	}
	#product_daily{width: 49%; height:2000px;margin-top: 60px;margin-bottom: 10px;float: left; border: 1px solid orangered}
	#product_monthly{width: 49%; height:2000px;margin-top: 60px;margin-bottom: 10px;float: right;border: 1px solid orangered}
</style>

</head>
<body>
<div class="header">
	<div class="inner">
			<a><span style="color: red">THE</span>&nbsp;&nbsp;REPORT</a>&nbsp;&nbsp;&nbsp;&nbsp;

			<a href="#" class="checked"><span> 用户分析 </span></a>&nbsp;
			<a href="#"><span> 类别分析 </span></a>&nbsp;
			<a href="#"><span> 商品分析 </span></a>&nbsp;
			<a href="#"><span> 营业额分析 </span></a>&nbsp;

			<a href="#" style="float: right"><span> 登录、退出 </span></a>&nbsp;
	</div>
</div>

<div class="main">
	<div id="product_daily"></div>
	<div id="product_monthly"></div>
</div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=SaMbpIPBdwnhS1pYh4tGAlPNihrr6UFM"></script>
<script src="js/echartsjs.js"></script>
<script src="js/bmapjs.js"></script>

<!--用户省份分布-->
<script>
    var myChart2 = echarts.init(document.getElementById("product_daily"));

    option2 = {
        title : {
            text: '商品日热度',
            subtext: '20180401数据'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['总','男性','女性']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        yAxis : [
            {
                type : 'category',
                data : [
                    "北京","天津","上海","河北省","山西省","内蒙古自治区","辽宁省","吉林省","黑龙江省",
					"江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省",
					"广东省","广西壮族自治区","海南省","重庆市","四川省","贵州省","云南省","西藏自治区",
					"陕西省","甘肃省","青海省","宁夏回族自治区","新疆维吾尔自治区",
					"香港特别行政区","澳门特别行政区","台湾省"
				]
            }
        ],
        xAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'总',
                type:'bar',
                data:[150, 300, 450, 600, 750, 900, 1050, 1200, 1350, 1500, 1650, 1800, 1950, 2100,
					2250, 2400, 2550, 2700, 2850, 3000, 3150, 3300, 3450, 3600, 3750, 3900, 4050, 4200,
					4350, 4500, 4650, 4800, 4950, 5100]
            },
            {
                name:'男性',
                type:'bar',
                data:[100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500
                    , 1600, 1700, 1800, 1900, 2000, 2100, 2200, 2300, 2400, 2500, 2600, 2700, 2800,
                    2900, 3000, 3100, 3200, 3300, 3400]
            },
            {
                name:'女性',
                type:'bar',
                data:[50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800,
                    850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500,
                    1550, 1600, 1650, 1700]
            }
        ]
    };
    if (option2 && typeof option2 === "object") {
        myChart2.setOption(option2, true);
    }
</script>
<!--用户省份分布-->
<script>
    var myChart3 = echarts.init(document.getElementById("product_monthly"));

    option3 = {
        title : {
            text: '商品月热度',
            subtext: '20180401数据'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['总','男性','女性']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        yAxis : [
            {
                type : 'category',
                data : [
                    "北京","天津","上海","河北省","山西省","内蒙古自治区","辽宁省","吉林省","黑龙江省",
                    "江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省",
                    "广东省","广西壮族自治区","海南省","重庆市","四川省","贵州省","云南省","西藏自治区",
                    "陕西省","甘肃省","青海省","宁夏回族自治区","新疆维吾尔自治区",
                    "香港特别行政区","澳门特别行政区","台湾省"
                ]
            }
        ],
        xAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'总',
                type:'bar',
                data:[150, 300, 450, 600, 750, 900, 1050, 1200, 1350, 1500, 1650, 1800, 1950, 2100,
                    2250, 2400, 2550, 2700, 2850, 3000, 3150, 3300, 3450, 3600, 3750, 3900, 4050, 4200,
                    4350, 4500, 4650, 4800, 4950, 5100]
            },
            {
                name:'男性',
                type:'bar',
                data:[100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500
                    , 1600, 1700, 1800, 1900, 2000, 2100, 2200, 2300, 2400, 2500, 2600, 2700, 2800,
                    2900, 3000, 3100, 3200, 3300, 3400]
            },
            {
                name:'女性',
                type:'bar',
                data:[50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800,
                    850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500,
                    1550, 1600, 1650, 1700]
            }
        ]
    };
    if (option3 && typeof option3 === "object") {
        myChart3.setOption(option3, true);
    }
</script>
</body>
</html>